<template>
  <div>
    <el-dialog
      title="住户信息"
      :visible.sync="FormVisible"
      width="1000px"
      lock-scroll
      v-loading="loading"
      :append-to-body="true"
      @close="close()"
    >
      <el-container style="height: 550px; background-color: #fff">
        <el-aside
          width="200px"
          class="left"
          style="
            height: 100%;
            margin-right: 3px;
            border-radius: 5px;
            border: 1px solid rgb(227, 232, 238);
          "
        >
          <el-container class="h100">
            <el-header class="top" style="height: 0">
              <!-- <div style="float: left; margin-left: 5px">
                <svg-icon
                  slot="prefix"
                  icon-class="gdzx"
                  style="color: #409eff"
                />
              </div> -->
              <!-- <span>住户</span> -->
            </el-header>
            <div
              v-for="(item, index) in tabLeft"
              @click="(val) => funSelectData(item, index)"
              :class="index == active ? 'item on' : 'item'"
              :key="index"
            >
              <span class="name">
                <svg-icon :icon-class="item.icon" style="margin-right: 10px" />
                <span>{{ item.name }}</span>

                <span><i class="el-icon-arrow-right"></i></span>
              </span>
            </div>
          </el-container>
        </el-aside>
        <div style="height: 100%; background-color: #fff; width: 100%">
          <div
            v-if="active == '0'"
            v-loading="infoLoading"
            style="overflow: auto; height: 100%; padding: 0 10px"
          >
            <div
              style="
                background: #f3f4f9;
                padding: 10px;
                margin-top: 10px;
                border-radius: 6px;
              "
            >
              <span style="margin: 0 10px">
                <svg-icon
                  icon-class="cw"
                  style="margin-right: 10px; color: rgb(58, 132, 239)"
                />

                <span style="color: #666666"> 当前床位</span
                ><span style="margin: 0 5px; font-weight: bold; color: #333333"
                  >{{ bedsInfo.buildingName }}{{ bedsInfo.roomName }}</span
                >
              </span>
              <span
                style="
                  margin: 0 10px;
                  border-right: 1px solid #d6d7dc;
                  padding-right: 10px;
                "
              >
                <span style="color: #666666">床位费</span
                ><span
                  style="margin: 0 5px; font-weight: bold; color: #333333"
                  >{{ bedsInfo.price }}</span
                >
              </span>
              <span
                style="
                  margin: 0 10px;
                  border-right: 1px solid #d6d7dc;
                  padding-right: 10px;
                "
                ><span style="color: #666666">床位类型</span
                ><span
                  style="margin: 0 5px; font-weight: bold; color: #333333"
                  >{{ bedsInfo.type }}</span
                ></span
              >
              <span
                style="
                  margin: 0 10px;
                  border-right: 1px solid #d6d7dc;
                  padding-right: 10px;
                "
              >
                <span style="color: #666666">朝向 </span
                ><span
                  style="margin: 0 5px; font-weight: bold; color: #333333"
                  >{{ bedsInfo.orientName }}</span
                >
              </span>
              <span style="margin: 0 10px">
                <span style="color: #666666">空调</span>
                <span
                  style="margin: 0 5px; font-weight: bold; color: #333333"
                  v-if="bedsInfo.air == '1'"
                  >是</span
                >
                <span
                  style="margin: 0 5px; font-weight: bold; color: #333333"
                  v-else
                  >否</span
                >
              </span>
            </div>
            <el-form
              style="margin-top: 20px"
              ref="elForm"
              :model="formData"
              :rules="rules"
              size="small"
              label-width="90px"
            >
              <el-row style="display: flex; align-items: center">
                <el-col :span="16">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="学号" prop="account">
                        <el-input
                          v-model="formData.account"
                          placeholder="请输入学号"
                          :disabled="type == 2"
                          :maxlength="20"
                          clearable
                          :style="{ width: '100%' }"
                          @change="searchAccount"
                        >
                          <el-button
                            :disabled="type == 2"
                            slot="append"
                            icon="el-icon-search"
                          ></el-button
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" style="position: relative">
                      <el-form-item label="姓名" prop="name">
                        <el-input
                          v-model="formData.name"
                          placeholder="请输入姓名"
                          :disabled="type == 2"
                          :maxlength="20"
                          clearable
                          :style="{ width: '100%', display: 'flex' }"
                        >
                        </el-input>
                        <el-dropdown trigger="click" popper-append-to-body>
                          <el-button
                            :disabled="type == 2"
                            style="background-color: #f5f7fa; padding: 9px 7px"
                            icon="el-icon-search"
                            @click="searchName()"
                          ></el-button>
                          <el-dropdown-menu
                            slot="dropdown"
                            style="
                              height: auto;
                              max-height: 200px;
                              overflow: auto;
                            "
                          >
                            <el-dropdown-item
                              v-for="(item, index) in userNameList"
                              :key="index"
                              @click.native="handleClick(item)"
                            >
                              <div style="display: flex">
                                <span
                                  style="
                                    margin: 0 10px;
                                    display: inline-block;
                                    width: 100px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  >{{ item.account }}</span
                                >
                                <span
                                  style="
                                    margin: 0 10px;
                                    display: inline-block;
                                    width: 45px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  >{{ item.name }}</span
                                >
                                <span
                                  style="
                                    margin: 0 10px;
                                    display: inline-block;
                                    width: 150px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  >{{ item.collegeName }}</span
                                >
                                <span
                                  style="
                                    margin: 0px 10px;
                                    display: inline-block;
                                    width: 100px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  >{{ item.className }}</span
                                ><span
                                  style="
                                    margin: 0px 10px;
                                    width: 100px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    display: inline-block;
                                  "
                                  >{{ item.gradeId }}</span
                                ><span
                                  style="margin: 0 10px"
                                  v-if="item.sex == '0'"
                                  >女</span
                                ><span style="margin: 0 10px" v-else>男</span>
                              </div></el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <!-- <el-col :span="12">
                      <el-form-item label="曾用名" prop="usedName">
                        <el-input
                          v-model="formData.usedName"
                          placeholder="请输入专业名称"
                          :maxlength="20"
                          :disabled="formData.type == '1'"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                      <el-form-item label="性别" prop="sex">
                        <el-radio-group
                          v-model="formData.sex"
                          :disabled="type == 2"
                        >
                          <el-radio label="0">女</el-radio>
                          <el-radio label="1">男</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="校园卡号" prop="campusCard">
                        <el-input
                          v-model="formData.campusCard"
                          placeholder="请输入校园卡号"
                          :maxlength="50"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="出生日期" prop="birthDate">
                        <el-date-picker
                          v-model="formData.birthDate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :style="{ width: '100%' }"
                          placeholder="请选择日期选择"
                          clearable
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="民族" prop="nationCode">
                        <el-select
                          v-model="formData.nationCode"
                          placeholder="请选择民族"
                          clearable
                          filterable
                          :style="{ width: '100%' }"
                        >
                          <el-option
                            v-for="(item, index) in nationalList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item
                        label="政治面貌"
                        prop="politicalLandscapeId"
                      >
                        <el-select
                          v-model="formData.politicalLandscapeId"
                          placeholder="请选择学籍状态"
                          clearable
                          filterable
                          :style="{ width: '100%' }"
                        >
                          <el-option
                            v-for="(item, index) in politicalLandscapeList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="籍贯" prop="nativePlace">
                        <el-input
                          v-model="formData.nativePlace"
                          placeholder="请输入籍贯"
                          :maxlength="50"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="证件类型" prop="cardType">
                        <el-select
                          v-model="formData.cardType"
                          placeholder="请选择证件类型"
                          clearable
                          filterable
                          :style="{ width: '100%' }"
                        >
                          <el-option
                            v-for="(item, index) in cardTypeList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件号码" prop="cardNumber">
                        <el-input
                          v-model="formData.cardNumber"
                          placeholder="请输入证件号码"
                          :maxlength="50"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!-- </div> -->
                </el-col>
                <el-col :span="8" style="text-align: center">
                  <!-- <div style="width: 30%; text-align: center"> -->
                  <el-upload
                    class="avatar-uploader"
                    action="/api/file/upload"
                    :data="Imgdata"
                    accept="image/*"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />

                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <!-- </div> -->
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <!-- <el-form-item label="学生状态" prop="studentStatusId">
                    <el-select
                      v-model="formData.studentStatusId"
                      placeholder="请选择学生状态"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in StudentStatusList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item> -->
                </el-col>
                <el-col :span="8">
                  <!-- <el-form-item label="学籍状态" prop="studyStatusId">
                    <el-select
                      v-model="formData.studyStatusId"
                      placeholder="请选择学籍状态"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in studyStatusList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item> -->
                </el-col>
              </el-row>
              <el-row>
                <!-- <el-col :span="8">
                  <el-form-item label="是否留学生" prop="ifOverseas">
                    <el-radio-group v-model="formData.ifOverseas">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否师范生" prop="ifFreeStudent">
                    <el-radio-group v-model="formData.ifFreeStudent">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="phone">
                    <el-input
                      v-model="formData.phone"
                      placeholder="请输入联系电话"
                      :maxlength="20"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="学制" prop="yearsId">
                    <el-select
                      v-model="formData.yearsId"
                      placeholder="请选择学制"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in yearsList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="院系" prop="collegeId">
                    <el-select
                      v-model="formData.collegeId"
                      @change="collegeChange"
                      placeholder="请选择院系"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in collegeList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="专业" prop="majorId">
                    <el-select
                      v-model="formData.majorId"
                      @change="majorChange"
                      placeholder="请选择专业"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in majorList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年级" prop="gradeId">
                    <el-select
                      size="small"
                      :style="{ width: '100%' }"
                      v-model="formData.gradeId"
                      placeholder="请选择年级"
                      @change="gradeChange"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in gradeList"
                        :key="index"
                        :label="item.grade"
                        :value="item.grade"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="班级" prop="classId">
                    <el-select
                      v-model="formData.classId"
                      placeholder="请选择班级"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in classList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="培养层次" prop="trainingLevel">
                    <el-select
                      v-model="formData.trainingLevel"
                      placeholder="请选择培养层次"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in trainingLevelList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <el-form-item label="家庭住址" prop="homeAddress">
                    <el-input
                      v-model="formData.parentName"
                      placeholder="请输入家庭住址"
                      :maxlength="100"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row> -->
            </el-form>
          </div>
          <div
            v-if="active == '1'"
            style="width: 100%; height: calc(100% - 57px)"
          >
            <el-table
              :data="tableData"
              v-loading="tabloading"
              border
              tooltip-effect="light"
              height="100%"
              style="width: 100%"
              highlight-current-row
              ref="dataListTable"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                v-for="col in columns.filter((item) => item.visible)"
                :prop="col.prop"
                :label="col.label"
                :sortable="col.sortable"
                :resizable="col.resizable"
                :type="col.type"
                :show-overflow-tooltip="col.tooltip"
                :align="col.align"
                :width="col.width"
                :fixed="col.fixed"
                :key="col.prop"
              />
            </el-table>
          </div>
        </div>
      </el-container>
      <div class="dialog-footer" style="display: flex; justify-content: center">
        <el-button
          @click="save()"
          v-if="formData.id != null"
          :disabled="!liveAudit"
          :loading="saveLoading"
          >保存学生信息</el-button
        >
        <el-button
          v-if="formData.bedsId == null || formData.bedsId == ''"
          :disabled="!stayAudit"
          @click="roomIn()"
          >入住</el-button
        >
        <div v-if="formData.id != null">
          <el-button
            @click="roomOut()"
            v-if="studentId != null"
            :disabled="!inspectAudit"
            >退宿</el-button
          >
          <el-button
            :disabled="!inspectStayAudit"
            @click="tiaosu()"
            v-if="
              formData.bedsId != '' &&
              formData.bedsId != bedsId &&
              formData.bedsId != null
            "
            >调宿</el-button
          >
        </div>

        <el-button @click="FormVisible = false">取 消</el-button>
      </div>
      <checkOut ref="checkOut" @closeDia="closeDia"></checkOut>
    </el-dialog>
  </div>
</template>
<script>
import Token from "@/itsoftUI/auth/token.js";
import { validateEmail, validateMobile } from "@/itsoftUI/utils/validate";
import { getPremission } from "@/itsoftUI/auth/permission";
import { apiStudentInfo } from "@/api/basicData/studentInfo";
import { apiProfessional } from "@/api/basicData/professional";
import { apiDepartments } from "@/api/basicData/departments";
import { apiNational } from "@/api/basicData/national";
import { dictDataApi } from "@/api/basicData/dataDictionary";
import { apiClassInfo } from "@/api/basicData/classInfo";
import { apiTrainingLevel } from "@/api/basicData/trainingLevel";
import { compression } from "@/itsoftUI/utils/imgCompression";
import { apiIndex } from "@/api/accommodation/index";
import checkOut from "@/views/accommodation/home/checkOut";
import { ItSoftUtil } from "@/itsoftUI/utils/ItSoftUtil";
export default {
  components: {
    // roomInfo,
    checkOut,
  },
  props: {
    houseTypeList: {
      type: [Object, Array],
      default: () => {},
    },
  },
  data() {
    return {
      type: 1,
      FormVisible: false,
      loading: false,
      tabloading: false,
      saveLoading: false,
      active: "0",
      tabLeft: [
        { id: "1", name: "基本信息", icon: "jbxx" },
        { id: "2", name: "住宿轨迹", icon: "zsgj" },
        { id: "3", name: "行为记录", icon: "xwjl" },
        { id: "4", name: "出入记录", icon: "crjl" },
      ],
      imageUrl: "",
      nationalList: [], //民族
      cardTypeList: [], //证件类型
      StudentStatusList: [], //学生状态
      studyStatusList: [], //学籍状态
      politicalLandscapeList: [], // 政治面貌
      collegeList: [], //院系
      yearsList: [], //学制
      majorList: [], //专业
      classList: [], //班级
      trainingLevelList: [], //培养层次
      natureList: [],
      costList: [], //收费标准
      tabPosition: "1",
      studentId: "",
      userInfo: {},
      tableData: [],
      settingIsFlag: true,
      liveAudit: true,
      stayAudit: true,
      inspectAudit: true,
      inspectStayAudit: true,
      headers: {
        Token: "",
        TokenKey: "",
      },
      limitNum: 6,
      Imgdata: { system: "house" },
      fileList: [], // excel文件列表
      fileVOS: [],
      userAll: [],
      roomId: "",
      buildId: "",
      attributeList: [],
      userList: [],
      userAll: [],
      userNameList: [],
      infoLoading: false,
      //数据改变次数
      dataChangeCount: 0,
      formData: {
        id: "",
        bedsId: null,
        account: "",
        name: "",
        usedName: "",
        sex: "",
        birthDate: "",
        campusCard: "",
        nativePlace: "",
        nationCode: "",
        cardNumber: "",
        studentStatusId: "",
        studyStatusId: "",
        ifOverseas: "",
        ifFreeStudent: "",
        phone: "",
        yearsId: "",
        politicalLandscapeId: "",
        collegeId: "",
        majorId: "",
        gradeId: "",
        classId: "",
        trainingLevel: "",
        parentName: "",
        parentsCall: "",
        parentName: "",
      },
      deptList: [],
      bedsInfo: {},
      gradeList: [],
      rules: {
        account: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        collegeId: [
          {
            required: true,
            message: "请选择院系",
            trigger: "blur",
          },
        ],
        majorId: [
          {
            required: true,
            message: "请选择专业",
            trigger: "blur",
          },
        ],
        trainingLevel: [
          {
            required: true,
            message: "请选择培养层次",
            trigger: "blur",
          },
        ],
        gradeId: [
          {
            required: true,
            message: "请输入年级",
            trigger: "blur",
          },
        ],
        classId: [
          {
            required: true,
            message: "请选择班级",
            trigger: "blur",
          },
        ],
        phone: [{ required: true, validator: validateMobile }],
        parentsCall: [{ required: false, validator: validateMobile }],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入专业编码",
            trigger: "blur",
          },
        ],
      },
      field118Action: "https://jsonplaceholder.typicode.com/posts/",
      field118fileList: [],
      columns: [
        {
          prop: "status",
          label: "类型",
          sortable: false,
          align: "center",
          visible: true,
          tooltip: true,
          max: 100,
          width: 80,
        },
        {
          prop: "handleWay",
          label: "办理渠道",
          align: "center",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "handleTime",
          label: "办理时间",
          align: "center",
          sortable: false,
          visible: true,
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "re",
          label: "备注",
          sortable: false,
          align: "left",
          visible: true,
          tooltip: true,
          max: 100,
        },
        {
          prop: "createName",
          label: "操作人",
          sortable: false,
          align: "left",
          visible: true,
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "createTime",
          label: "操作时间",
          sortable: false,
          align: "left",
          visible: true,
          tooltip: true,
          max: 100,
          width: 150,
        },
      ],
      toolButtons: [
        {
          text: "保存",
          auth: "030101",
        },
        {
          text: "调宿",
          auth: "030102",
        },
        {
          text: "入住",
          auth: "030103",
        },
        {
          text: "退宿",
          auth: "030104",
        },
      ],
      bedsId: "",
    };
  },
  methods: {
    // querySearchAsync(queryString, cb) {
    //   var userAll = this.userAll;
    //   var results = queryString
    //     ? userAll.filter(this.createStateFilter(queryString))
    //     : userAll;

    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     cb(results);
    //   }, 1000 * Math.random());
    // },
    // createStateFilter(queryString) {
    //   return (state) => {
    //     return (
    //       state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    //     );
    //   };
    // },
    tiaosu() {
      this.loading = true;

      apiIndex
        .EmptyBedsLodge(
          this.bedsId,
          ItSoftUtil.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss"),
          this.formData.id
        )
        .then((res) => {
          if (res.status == "success") {
            this.$message.success("调宿成功");
            this.FormVisible = false;
            this.funLoadList();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    save() {
      this.loading = true;
      this.formData.photo = this.imageUrl;
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          apiStudentInfo
            .Save(this.formData)
            .then((res) => {
              if (res.status == "success") {
                this.$message.success("提交成功");
                this.FormVisible = false;
                this.loading = false;
                this.funLoadList();
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    //入住
    roomIn() {
      this.loading = true;

      apiIndex
        .ConfirmCheckIn(
          this.bedsId,
          ItSoftUtil.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss"),
          this.formData.id
        )
        .then((res) => {
          if (res.status == "success") {
            this.$message.success("入住成功");
            this.FormVisible = false;
            this.funLoadList();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleClick(item) {
      this.infoLoading = true;
      apiStudentInfo.Get(item.id).then((res) => {
        this.formData = res.data;

        let condition = [];
        let condition1 = [];
        condition = [
          {
            andOr: "and",
            searchField: "collegeId",
            operator: "=",
            searchValue: res.data.collegeId,
          },
        ];

        apiProfessional.List(JSON.stringify(condition)).then((res) => {
          if (res.status == "success") {
            this.majorList = res.data;
          }
        });

        if (res.data.majorId) {
          apiClassInfo.GradeList(res.data.majorId).then((res) => {
            this.gradeList = res.data;
          });
        }
        condition1 = [
          {
            andOr: "and",
            searchField: "majorId",
            operator: "=",
            searchValue: res.data.majorId,
          },
          {
            andOr: "and",
            searchField: "grade",
            operator: "=",
            searchValue: res.data.gradeId,
          },
        ];
        apiClassInfo.List(JSON.stringify(condition1)).then((res) => {
          if (res.status == "success") {
            this.classList = res.data;
          }
        });
        this.infoLoading = false;
      });
    },
    searchAccount() {
      if (this.formData.account == null || this.formData.account == "") {
        this.creatData();

        this.$message.error("请填写学号再进行搜索");
        return false;
      }
      let page = {};
      let condition = [];
      condition = [
        {
          andOr: "and",
          searchField: "account",
          operator: "=",
          searchValue: this.formData.account,
        },
      ];
      this.infoLoading = true;
      apiStudentInfo.StuList("", JSON.stringify(condition)).then((res) => {
        if (res.status == "success") {
          if (res.data.length > 0) {
            this.formData = res.data[0];

            let condition = [];
            let condition1 = [];
            condition = [
              {
                andOr: "and",
                searchField: "collegeId",
                operator: "=",
                searchValue: this.formData.collegeId,
              },
            ];

            apiProfessional.List(JSON.stringify(condition)).then((res) => {
              if (res.status == "success") {
                this.majorList = res.data;
              }
            });

            if (this.formData.majorId) {
              apiClassInfo.GradeList(this.formData.majorId).then((res) => {
                this.gradeList = res.data;
              });
            }
            condition1 = [
              {
                andOr: "and",
                searchField: "majorId",
                operator: "=",
                searchValue: this.formData.majorId,
              },
              {
                andOr: "and",
                searchField: "grade",
                operator: "=",
                searchValue: this.formData.gradeId,
              },
            ];
            apiClassInfo.List(JSON.stringify(condition1)).then((res) => {
              if (res.status == "success") {
                this.classList = res.data;
              }
              this.infoLoading = false;
            });
          } else {
            this.infoLoading = false;
            this.$message.error("没有该学号的学生信息");
          }
        }
      });
    },
    searchName() {
      if (this.formData.name == "" || this.formData.name == null) {
        this.userNameList = [];
        this.$message.error("请填写姓名再进行搜索");
        return false;
      }
      let page = {};
      let condition = [];
      condition = [
        {
          andOr: "and",
          searchField: "name",
          operator: "like",
          searchValue: this.formData.name,
        },
      ];
      this.infoLoading = true;
      apiStudentInfo.StuList("", JSON.stringify(condition)).then((res) => {
        if (res.status == "success") {
          this.userNameList = res.data;
          this.infoLoading = false;
        }
      });
    },
    //获取所有用户
    funGetUserAll() {
      apiStudentInfo.List().then((res) => {
        if (res.status == "success") {
          this.userList = res.data;
          res.data.forEach((el) => {
            let obj = {
              value: el.account,
            };
            this.userAll.push(obj);
          });
        }
      });
    },

    beforeAvatarUpload(file) {
      this.headers.Token = Token.getToken();
      this.headers.TokenKey = Token.getTokenKey();
      let _this = this;
      this.saveLoading = true;
      return new Promise((resolve, reject) => {
        let image = new Image(),
          resultBlob = "";
        image.src = URL.createObjectURL(file);
        image.onload = () => {
          // 调用方法获取blob格式，方法写在下边
          resultBlob = compression(image, file);
          resolve(resultBlob);
        };
        image.onerror = () => {
          reject();
        };
      });
    },
    //关闭
    closeDia() {
      this.FormVisible = false;
      this.funLoadList();
    },
    //退宿
    roomOut() {
      this.$refs.checkOut.FormVisible = true;
      this.$refs.checkOut.formData.bedsId = this.formData.bedsId;
      this.$refs.checkOut.formData.studentId = this.formData.id;
    },
    handleAvatarSuccess(res, file) {
      //图片上传成功
      this.imageUrl =
        this.$itsoftUI.config.fileServer + file.response.data.path;
      this.saveLoading = false;
    },
    //获取民族
    funLoadNation() {
      apiNational.List().then((res) => {
        this.nationalList = res.data;
      });
    },
    //证件类型
    funCradType() {
      let condition = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "zjlx",
        },
      ];
      dictDataApi.dictRightList(JSON.stringify(condition)).then((res) => {
        if (res.errorCode === 0) {
          this.cardTypeList = res.data;
        }
      });
    },
    //学生状态
    funStudentStatusId() {
      let condition = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "xszt",
        },
      ];
      dictDataApi.dictRightList(JSON.stringify(condition)).then((res) => {
        if (res.errorCode === 0) {
          this.StudentStatusList = res.data;
        }
      });
    },
    //学籍状态
    funStudyStatus() {
      let condition = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "xjzt",
        },
      ];
      dictDataApi.dictRightList(JSON.stringify(condition)).then((res) => {
        if (res.errorCode === 0) {
          this.studyStatusList = res.data;
        }
      });
    },
    //政治面貌
    funPoliticalLandscape() {
      let condition = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "zjmm",
        },
      ];
      dictDataApi.dictRightList(JSON.stringify(condition)).then((res) => {
        if (res.errorCode === 0) {
          this.politicalLandscapeList = res.data;
        }
      });
    },
    //学制
    funYearsList() {
      let condition = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "xzz",
        },
      ];
      dictDataApi.dictRightList(JSON.stringify(condition)).then((res) => {
        if (res.errorCode === 0) {
          this.yearsList = res.data;
        }
      });
    },
    //院系
    funcollegeList() {
      apiDepartments.List().then((res) => {
        if (res.status == "success") {
          this.collegeList = res.data;
        }
      });
    },
    //院系change
    collegeChange(val) {
      this.formData.majorId = "";
      this.formData.classId = "";
      this.formData.gradeId = "";
      this.majorList = [];
      this.classList = [];
      this.gradeList = [];
      let condition = [];
      condition = [
        {
          andOr: "and",
          searchField: "collegeId",
          operator: "=",
          searchValue: val,
        },
      ];

      apiProfessional.List(JSON.stringify(condition)).then((res) => {
        if (res.status == "success") {
          this.majorList = res.data;
        }
      });
    },
    //专业change
    majorChange(val) {
      this.formData.classId = "";
      this.formData.gradeId = "";
      this.classList = [];
      this.gradeList = [];
      // let condition = [];
      // condition = [
      //   {
      //     andOr: "and",
      //     searchField: "majorId",
      //     operator: "=",
      //     searchValue: val,
      //   },
      // ];

      // apiClassInfo.List(JSON.stringify(condition)).then((res) => {
      //   if (res.status == "success") {
      //     this.classList = res.data;
      //   }
      // });
      if (val != "") {
        apiClassInfo.GradeList(val).then((res) => {
          this.gradeList = res.data;
        });
      }
    },
    gradeChange(val) {
      let condition = [];
      this.formData.classId = "";
      this.classList = [];
      condition = [
        {
          andOr: "and",
          searchField: "majorId",
          operator: "=",
          searchValue: this.formData.majorId,
        },
        {
          andOr: "and",
          searchField: "grade",
          operator: "=",
          searchValue: this.formData.gradeId,
        },
      ];

      apiClassInfo.List(JSON.stringify(condition)).then((res) => {
        if (res.status == "success") {
          this.classList = res.data;
        }
      });
    },
    //培养层次
    funtrainingLevel() {
      apiTrainingLevel.List().then((res) => {
        this.trainingLevelList = res.data;
      });
    },
    // 专业
    formatTime(time) {
      if (time != undefined) {
        return time.substr(0, 11);
      }
    },
    //收费
    funLoadCost() {
      costProjectApi.GetFormulaList().then((res) => {
        this.costList = res.data;
      });
    },
    //刷新数据
    funLoadList() {
      this.$emit("funLoadList");
    },
    // 验房详情
    dbDetail() {
      this.$refs.room.open();
      this.$refs.room.currentRow = {
        id: this.formData.InspectId,
        roomId: this.roomId,
      };
      this.$refs.room.edit();
    },
    funSelectData(item, index) {
      this.active = index;
      switch (item.name) {
        case "住宿轨迹":
          this.funAllocationList();
          break;

        default:
          break;
      }
    },
    //住宿轨迹
    funAllocationList() {
      let condition = [
        {
          andOr: "and",
          searchField: "studentId",
          operator: "=",
          searchValue: this.studentId,
        },
      ];
      this.tabloading = true;
      apiIndex
        .AllocationList(JSON.stringify(condition), "createTime desc")
        .then((res) => {
          this.tableData = res.data;
          this.tabloading = false;
        });
    },
    creatData() {
      this.formData = {
        id: "",
        bedsId: null,
        account: "",
        name: "",
        usedName: "",
        sex: "",
        birthDate: "",
        campusCard: "",
        nativePlace: "",
        nationCode: "",
        cardNumber: "",
        studentStatusId: "",
        studyStatusId: "",
        ifOverseas: "",
        ifFreeStudent: "",
        phone: "",
        yearsId: "",
        politicalLandscapeId: "",
        collegeId: "",
        majorId: "",
        gradeId: "",
        classId: "",
        trainingLevel: "",
        parentName: "",
        parentsCall: "",
        parentName: "",
      };
    },
    //弹框关闭
    close() {
      this.creatData();
      this.$refs.elForm.clearValidate();
      this.active = 0;
      this.imageUrl = "";
    },
  },
  watch: {
    toolButtons: {
      handler: function (val) {
        let that = this;
        // 保存
        let rShen = val.filter((item) => item.auth === "030101");
        if (rShen && rShen.length > 0 && rShen[0].disabled)
          that.liveAudit = false;
        // 入住
        let stay = val.filter((item) => item.auth === "030102");
        if (stay && stay.length > 0 && stay[0].disabled) that.stayAudit = false;
        // 退宿
        let inspectIn = val.filter((item) => item.auth === "030103");
        if (inspectIn && inspectIn.length > 0 && inspectIn[0].disabled)
          that.inspectAudit = false;
        // 调宿
        let inspectStay = val.filter((item) => item.auth === "030104");
        if (inspectStay && inspectStay.length > 0 && inspectStay[0].disabled)
          that.inspectStayAudit = false;
      },
      deep: true,
    },
  },
  created() {
    this.funLoadNation();
    this.funCradType();
    this.funStudentStatusId();
    this.funStudyStatus();
    this.funPoliticalLandscape();
    this.funYearsList();
    this.funcollegeList();
    this.funtrainingLevel();
    getPremission(this.toolButtons);
  },
  computed: {},
  mounted() {
    // this.funGetUserAll();
  },
};
</script>
<style lang="scss" scoped>
.el-dropdown-menu {
  // left: 1029px !important;
}
.el-dropdown {
  position: absolute;
  top: -1px;
  right: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 10px;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
.yanfangruzhu {
  width: 133px !important;
}
.el-tabs--border-card {
  box-shadow: none;
  border: none;
}
.badge {
  margin-left: 50px;
  display: inline-block;
  font-weight: bold;
  color: #3a84ef;
  font-size: 15px;
  position: absolute;
  right: 50px;
}

.line-p {
  width: 90%;
  margin: 15px auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.left {
  //   background-color: #f1f1f1;

  .top {
    position: relative;
    line-height: 45px;
    color: #666666;
    background: #f8f8f8;
    span {
      font-size: 13px;
      font-weight: bold;
      padding-left: 5px;
    }

    i {
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 20px;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }
    }
  }

  .item {
    position: relative;
    // float: left;
    width: 99%;
    height: 50px;
    line-height: 40px;

    cursor: pointer;

    span {
      float: left;
    }

    .name {
      margin-top: 5px;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }

    .remark {
      font-size: 12px;
      color: #999999;
      overflow: hidden;
    }

    i {
      position: absolute;
      display: none !important;
      top: 18px;
      cursor: pointer;
      right: 17px;
    }

    &:hover:not(.on) {
      background-color: #f7f7f7;
    }
  }

  .on {
    background: #f2f7ff;
    cursor: default !important;
    border-left: 2px solid #3a84ef;
    color: #3a84ef;
    i {
      position: absolute;
      display: block !important;
      top: 18px;
      cursor: pointer;
      right: 17px;
    }
  }
}

.line {
  float: left;

  .el-divider__text {
    font-weight: bold !important;
    color: #333333;
    font-size: 13px;
  }
}
</style>